<template>
  <div class="browse">
    <Tips v-if="ListInfo.length"
    :isBottom="false"
    :isTool="false" 
    :title="title"
    status="有"
    :increase="todayCount" 
    :reduce="yesterdayCount" />
    <van-list ref="van-list" v-model="loading" :finished="finished" :finished-text="finished && !ListInfo.length ? '' : '没有更多了'" @load="getListInfo">
      <div v-for="(item, index) in ListInfo" :key="item.clientId">
        <div class="cell box-shadow-1px-bottom" @click="handleClick(item)">
          <div class="read-people">
            <Avatar size="small" :avatar="item.avatarUrl"> 
              <!-- <MessageTips slot="extra" :news="item.unreadDynamicCount" /> -->
            </Avatar>
            <div class="user-info">
              <p class="profile">
                <span class="name ellipsis">{{ item.clientName }}</span>
                <span class="aw-tag">
                  <span v-if="item.clientStrangerFlag !== 2">访客</span>
                  <span class="active" v-else>意向客户</span>
                </span>
                <!-- <van-tag v-if="item.clientStrangerFlag !== 2"
                 color="rgb(156, 165, 181, 0.15)"
                 text-color="#40516F"
                 >访客</van-tag>
                <van-tag v-else
                 color="rgb(0, 122, 230, 0.15)"
                 text-color="#007AE6"
                 >意向客户</van-tag> -->
              </p>
              <p class="time">{{ item.updateTimeStr }}</p>
            </div>
            <div class="record-num">
              <p class="num">{{ item.readNum }}</p>
              <p class="text">浏览次数</p>
            </div>
          </div>
        </div>
        <NewestDivider v-if="findIndex == index" title="今日客户浏览" />
      </div>
    </van-list>
    <div class="no-data" v-if="!this.ListInfo.length && finished">
      <img src="@/assets/img/article/empty_article@2x.png"alt="">
      <p>暂无{{ title }}，快去分享吧~ </p>
    </div>
  </div>
</template>

<script>
import dynamicsService from 'SERVICE/dynamicsService'
import Avatar from '@/components/Avatar'
import Tips from '@/components/Dynamics/Tips'
import NewestDivider from '@/components/Dynamics/NewestDivider'
import MessageTips from '@/components/MessageTips'

export default {
  data(){
    return {
      title: "客户浏览文章",
      loading: false,
      finished: false,
      ListInfo: [],
      findIndex: 0,
      scrollTop: 0,
      size: 10,
      page: 1
    }
  },
  components: {
    Tips,
    Avatar,
    MessageTips,
    NewestDivider
  },
  created() {
    let { todayCount, yesterdayCount, total } = this.$route.query
    this.todayCount = +todayCount || 0
    this.yesterdayCount = +yesterdayCount || 0
    let str = total ? `(${total})` : ""
    document.title = this.title + str
    this.getCacheData()
  },
  mounted() {
    this.$nextTick(() => {
      this.$el.scrollTop = this.scrollTop
    })
  },
  methods: {
    async getListInfo() {
      let result = await dynamicsService.getScanArticleDynamicCustomerList(this.page, this.size)
      if (result.pages <= this.page) {
        this.finished = true
      } else {
        this.page +=1
      }
      this.loading = false
      this.ListInfo = this.ListInfo.concat(result.records)
      // this.ListInfo = []
      this.findIndex = this.ListInfo.findIndex(item => !item.ifToday) - 1
    },
    handleClick(item) {
      this.scrollTop = this.$el.scrollTop
      window.sessionStorage.setItem('browseInfo', JSON.stringify(this.$data))
      this.$router.push({ name: 'record', params: { id: item.clientId }})
    },
    getCacheData() {
      try {
        let browseInfo = sessionStorage.getItem('browseInfo')
        if (browseInfo) {
          let obj = JSON.parse(browseInfo)
          for (const key in obj) {
              this[key] = obj[key]
          }
          sessionStorage.removeItem('browseInfo')
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.browse {
  .read-tip {
    display: flex;
    height: 48px;
    padding: 0 16px;
    justify-content: space-between;
    align-items: center;
    background: #F7F9FA;
    span {
      color: #405170;
      font-size: 14px;
    }
    button {
      font-size: 12px;
      font-weight: 400;
      color: #007ae6;
      height: 24px;
      border-radius: 12px;
      border: 1px solid #007ae6;
      background-color: #ffffff;
      padding: 5px 12px;
    }
  }
}
.cell { 
  padding: 16px;
}
.read-people {
  display: flex;
  align-items: center;
  .user-info {
    flex: 1;
    padding-left: 10px;
    .profile {
      line-height: 22px;
      font-size: 14px;
      // height: 26px;
      .name {
        color: #13284D;
        font-weight: bold;
        font-size: 16px;
        padding-right: 8px;
        max-width: 180px;
        display: inline-block;
        vertical-align: text-top;
      }
      /deep/ .van-tag {
        vertical-align: middle;
        transform: scale(0.8);
        // opacity: 0.6;
      }
      .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .time {
      color: #9BA4B4;
      font-size: 14px;
      line-height: 22px;
    }
  }
  .record-num {
    font-size: 10px;
    flex-basis: 60px;
    text-align: center;
    .num {
      font-size: 20px;
      font-weight: bold;
      color: #13284D;
    }
    .text {
      font-size: 10px;
      color: #9BA4B4;
    }
  }
}

.no-data {
  width: 100%;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  font-size: 12px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  text-align: center;
  height: 17px;
  line-height: 17px;
  img {
    width: 88px;
    height: 88px;
  }
}

.aw-tag {
  font-size: 10PX;
  line-height: normal;
  display: inline-table;
  vertical-align: middle;
  font-family: 'Microsoft YaHei', 'PingFangSC-Regular';
  span {
    display: table-cell;
    vertical-align: middle;
    padding: 0 4px;
    border-radius: 2px;
    background: rgba(156, 165, 181, 0.15);
    color: #40516f;
    &.active {
      color: #007ae6;
      background: rgba(0, 122, 230, 0.15);
    }
  }
}

/deep/ .van-cell {
  padding: 16px;
  &::after {
    left: 0;
  }
  // .van-tag {
  //   vertical-align: text-top;
  // }
}
</style>